<template>
  <div class="footer">
    <div class="service-info">
      <ul>
        <li>
          <div class="circle">
            <img src="../assets/img/zpbz.png" alt="">
          </div>

        </li>
        <li>
          <div class="circle">
            <img src="../assets/img/zxdj.png" alt="">
          </div>

        </li>
        <li>
          <div class="circle">
            <img src="../assets/img/plqq.png" alt="">
          </div>
        </li>
        <li>
          <div class="circle">
          <img src="../assets/img/kccz.png" alt="">
          </div>
        </li>
      </ul>
    </div>
    <div class="m-main">
      <div class="container">
        <div id="J-footerBd" class="footer-bd">
          <div class="flex">
            <!-- <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell fixed wx-Qrcode">
              <div class="item-wrap">
                <img :src="require('@/assets/img/wx-qrcode.png')" alt="">
              </div>
            </div> -->
            <!-- <div  @mouseenter="hover=true" class="item cell fixed main">
              <div class="item-wrap">
                <div class="flex">
                  <div class="cell fixed">
                    <img class="logo" src="/images/logo_footer.png" alt="">
                  </div>
                  <div class="cell">
                    <div class="linkWrap">
                      <a href="javascriipt:;" class="link">
                        <i class="icon-wechat"></i>
                      </a>
                      <a href="//wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzkzODAxNTk4M180NjIyMzNfNDAwODAxODk4OF8yXw" class="link">
                        <i class="icon-qq"></i>
                      </a>
                    </div>
                    <p class="tel"><i class="icon-dianhua1"></i>400-618-0107</p>
                    <p class="txt">周一至周五 08:30-17:00</p>
                  </div>
                </div>
              </div>
            </div> -->

            <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell link-extraMod"  style="padding-left: 40px">
              <div class="item-wrap">
                <dl>
                  <dt>
                    常见问题</dt>
                  <dd>
                    <a href="/#/bulletin/?id=8">
                      购物保障</a>
                    <a href="/#/bulletin/?id=10">
                      购物流程</a>
                    <a href="/#/bulletin/?id=11">
                      退换货流程</a>
                  </dd>
                </dl>
              </div>
            </div>

            <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell link-extraMod"  style="padding-left: 40px">
              <div class="item-wrap">
                <dl>
                  <dt>
                    支付相关</dt>
                  <dd>
                    <a href="/#/bulletin/?id=12">
                      支付方式</a>
                    <a href="/#/bulletin/?id=13">
                      关于发票</a>
                    <a href="/#/bulletin/?id=14">
                      退款说明</a>
                  </dd>
                </dl>
              </div>
            </div>

            <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell link-extraMod"  style="padding-left: 40px">
              <div class="item-wrap">
                <dl>
                  <dt>
                    配送政策</dt>
                  <dd>
                    <a href="/#/bulletin/?id=15">
                      配送说明</a>
                    <a href="/#/bulletin/?id=16">
                      配送须知</a>
                  </dd>
                </dl>
              </div>
            </div>

            <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell link-extraMod"  style="padding-left: 40px">
              <div class="item-wrap">
                <dl>
                  <dt>
                    商场指南</dt>
                  <dd>
                    <a href="/#/bulletin/?id=17">
                      会员注册</a>
                    <a href="/#/bulletin/?id=18">
                      订购方式</a>
                  </dd>
                </dl>
              </div>
            </div>

            <div @mouseenter="hover=false" @mouseleave="hover=true" class="item cell link-extraMod" style="padding-right: 20px">
              <div class="item-wrap">
              <div class="bottom_img">
                <img src="../assets/img/shy.png" alt="">
                <img src="../assets/img/gzhbj.jpg" alt="">
              </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="m-copyright">
      <a href="//wljg.scjgj.wuhan.gov.cn:80/whwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=5f54e11932a8a7bf5afdfb64f716bceb&bus_ent_id=160000012247201427&bus_ent_chr_id=7d855d0b8cd34cfb955730c4a91950d0" target="_blank"><img src="https://cdn.learnku.com/uploads/images/201908/21/1/L4ckM2CVb6.png!/fw/20" width="30px" height="30px" title="武汉网监电子标识" alt="武汉网监电子标识" border="0"/></a>
      Copyright © 工流界供应链(武汉)有限公司 All Rights Reserved  <a href="//www.beian.miit.gov.cn/" target="_blank">
      鄂ICP备19024349号-1</a>
      <a style="margin-left:6px;" target="_blank" href="//www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502004436">
        <img style="vertical-align: -4px;margin-right: 2px;" :src="require('@/assets/img/ghs.png')">鄂公网安备 42018502004436号
      </a>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      hover: false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/footer.css';
.footer{
  // margin-top: 72px;
}
.service-info{
  height: 100px;
  border-top: 5px solid #9d9d9d;
  padding: 40px 0 10px;
  text-align: center;
  color: #4448f8;
  font-size: 16px;
  background: #fff;
  ul{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    li{
      flex: 1;
      display: flex;
      align-items: center;
    }
    .circle{
      display: inline-block;
      width: 36px;
      height: 36px;
      line-height: 32px;
      margin-right: 12px;
      box-sizing: border-box;
      border-radius: 12px;
      font-size: 24px;
      text-align: center;
      vertical-align: middle;
      img{
        height: 84.6px;
        width: 180px;
        margin-left: 50px;
      }
    }

  }
}
.bottom_img{
  display: flex;
  img{
    width: 110px;
    height: 110px;
    margin-left: 20px;
  }
}
</style>
